<template>
  <section>
    <div class="wrapper">
      <h2>历届教代会提案</h2>
      <ul>

        <li
          v-for="item in proposalList"
          :key="item.id"
          @click="$troute.query('proposalList', [item.id, item.name])"
        >
          <div>
            <span></span>
            <h3>{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>


export default {
  data() {
    return {
      proposalList: [
        {
          id:'0',
          name:'全部提案'
        },
        {
          id:'2',
          name:'优秀提案'
        },
        {
          id:'1',
          name:'优秀重点提案'
        },


      ],
    };
  },
  mounted() {
  },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 25px 20px;
  h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 25px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  ul {
    margin: 0 -10px;
    overflow: hidden;
  }
  ul li {
    float: left;
    width: 50%;
    margin-top: 20px;
    padding: 0 10px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    div {
      padding: 22px 0;
      color: #333;
      background: #e9c5ba url(../imgs/cloud.png) no-repeat center bottom;
      background-size: contain;
      border-radius: 5px;
      overflow: hidden;
      img {
        height: 32px;
      }
      h3 {
        margin-top: 20px;
        padding: 0 15px;
        font-size: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      span {
        display: inline-block;
        width: 40px;
        height: 32px;
        background: url(../imgs/case01.png) no-repeat center center;
        background-size: contain;
      }
    }
    &:first-of-type {
      div {
        height: 260px;
        padding-top: 80px;
        box-sizing: border-box;
        img {
          height: 50px;
        }
      }
    }
    &:nth-child(2) div {
      color: #fff;
      background-color: #9c1017;
      span {
        background-image: url(../imgs/case02.png);
      }
    }
    &:nth-child(3) div {
      color: #fff;
      background-color: #783034;
      span {
        background-image: url(../imgs/case03.png);
      }
    }
  }
}
</style>
